<template>
  <div>
    <Row :gutter="10">
      <i-col span="24">
        <div>
          <vxe-toolbar :refresh="{query: reload}" custom>
            <template v-slot:buttons>
              <vxe-button v-if="hasAccessByKey('system_role_add')" size="mini" icon="vxe-icon--plus" content="新增"
                          @click="RoleAddEnable = true"></vxe-button>
              <vxe-button v-if="hasAccessByKey('system_role_delete')" size="mini" status="danger"
                          icon="iconfont icon-delete-fill" style="margin-left: 10px;"
                          content="批量删除" @click="deleteRole"></vxe-button>
              <vxe-input v-model="search" class="my-search" @input="reload" placeholder="输入关键字搜索"
                         style="margin-left: 10px;"></vxe-input>
            </template>
          </vxe-toolbar>
          <vxe-table
            style="margin-top: 10px;"
            id="toolbar_demo3"
            round
            :loading="loading"
            :custom-config="{storage: true}"
            :edit-config="{trigger: 'click', mode: 'row'}"
            highlight-current-row
            highlight-current-column
            @edit-closed="updateData"
            @checkbox-change="checkboxChange"
            @checkbox-all="checkboxChange"
            :data="tableData">
            <vxe-table-column type="checkbox" width="60"></vxe-table-column>
            <vxe-table-column field="id" title="ID" width="60"></vxe-table-column>
            <vxe-table-column field="name" title="管理员名称" width="200"></vxe-table-column>
            <vxe-table-column field="description" title="角色" width="120"></vxe-table-column>
            <vxe-table-column v-if="hasAccessByKey('system_manager_update')" field="description" title="描述"
                              :edit-render="{name: 'input'}"></vxe-table-column>
            <vxe-table-column v-else field="description" title="描述"></vxe-table-column>
            <vxe-table-column field="status" title="状态" width="100" show-overflow>
              <template v-slot:default="{row}">
                <vxe-switch v-if="row.id !== 1" v-model="row.status" on-label="启用" off-label="禁用"
                            @change="(value)=>{statusChange(row,value)}"
                            :disabled="!hasAccessByKey('system_manager_update_status')"></vxe-switch>
              </template>
            </vxe-table-column>
            <vxe-table-column field="address" title="操作" width="300">
              <template v-slot:default="{row}">
                <vxe-button v-if="row.id !== 1 && hasAccessByKey('system_role_update')" icon="iconfont icon-quanxian"
                            content="修改密码" @click="authManager(row)"/>
                <vxe-button v-if="row.id !== 1 && hasAccessByKey('system_role_update')"
                            icon="iconfont icon-bianjisekuai" content="编辑" @click="authManager(row)"/>
                <vxe-button v-if="row.id !== 1 && hasAccessByKey('system_role_update')" icon="iconfont icon-delete-fill"
                            status="danger" content="删除" @click="deleteRole(row)"/>
              </template>
            </vxe-table-column>
          </vxe-table>
        </div>
        <Spin size="large" fix v-if="spinShow"></Spin>
      </i-col>
    </Row>
    <template>
      <vxe-modal title="新增管理员" v-model="RoleAddEnable" resize remember transfer>
        <template v-slot>
          <role-add @roleAdd="reload"></role-add>
        </template>
      </vxe-modal>
    </template>
  </div>
</template>

<script>
import PasteEditor from '_c/paste-editor'
import { roleDelete, roleIndexData, roleUpdateData, roleUpdateStatus } from '@/api/role'
import RoleAdd from './add'
import DynamicForm from '@/components/dynamic-form'

export default {
  name: 'system_manager',
  components: {
    PasteEditor,
    RoleAdd,
    DynamicForm
  },
  data () {
    return {
      loading: false,
      RoleAddEnable: false,
      search: '',
      spinShow: false,
      tableData: [],
      selection: []
    }
  },
  mounted () {
    this.reload()
  },
  methods: {
    checkboxChange (event) {
      this.selection = event.selection
    },
    reload () {
      this.loading = true
      roleIndexData({
        search: this.search
      }).then(({ data, status }) => {
        this.tableData = data.data.roles
        this.loading = false
      })
    },
    updateData (data) {
      roleUpdateData(data.row).then(({ data, status }) => {
        this.$XModal.message({
          message: data.message,
          status: 'success',
          duration: 1000
        })
      }).catch((error) => {
        this.$XModal.alert({
          message: error.response.data.message,
          status: 'error'
        })
      })
    },
    statusChange (row, value) {
      roleUpdateStatus({
        id: row.id,
        value: value.value ? 1 : 0
      }).catch((error) => {
        this.$XModal.alert({
          message: error.response.data.message,
          status: 'error'
        })
      })
    },
    deleteRole (row) {
      if (!row.id) {
        let ids = []
        for (let key in this.selection) {
          ids.push(this.selection[key]['id'])
        }
        row.id = ids.join(',')
        if (!row.id) {
          this.$XModal.alert({
            message: '请选择要删除角色.',
            status: 'error'
          })
          return
        }
      }
      this.$XModal.confirm('该操作将中断该角色管理员当前的操作，您确定要删除吗？', '删除角色').then(type => {
        if (type === 'cancel') {
          return
        }
        roleDelete({
          id: row.id
        }).then(({ data, status }) => {
          this.$XModal.message({
            message: data.message,
            status: 'success',
            duration: 1000
          })
          this.reload()
        })
      })
    },
    authManager (role) {
      const route = {
        name: 'manager_auth',
        params: {
          role: role.id
        },
        query: {
          name: role.name
        },
        meta: {
          title: `动态路由-${role.name}`
        }
      }
      this.$router.push(route)
    }
  }
}
</script>

<style scoped>

</style>
